<template>
	<view class="">
		<u-sticky>
			<view class="flexbetween ffffff mainpadding">
				<view class="ssousuobox" style="width: 80%;">
					<view class="flexleft">
						<u-icon class="margin_right1" name="search" size="28"></u-icon>
						<input type="text" placeholder="请输入搜索内容" v-model="keywords" confirm-type="search" @confirm="init()">
					</view>
				</view>
				<view class="ershiba xiaohei nofonweight" @click="init">搜索</view>
			</view>
		</u-sticky>
		<view class="mainpadding2">
			<!-- 搜索结果 -->
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 300rpx;" ></view>
			</view>
			<template v-if="ss_type==1">
				<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id" @click="tzcdyd(item.id)">
					<view class="flexbetween">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 69%;">
							<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
							<view class="flexbetween margin_top2">
								<view class="flexleft ">
									<view class="smalltext xiaohui nofonweight margin_right2">{{item.userzbfapply.name}}</view>
									<view class="line margin_right2"></view>
									<view class="smalltext xiaohui nofonweight">{{item.cityinfo}}</view>
								</view>
								<view class="smalltext xiaohei nofonweight">{{returnKmUnit(Number(item.distance))}}</view>
							</view>
							<view class="flexbetween margin_top2">
								<view class="huibtn margin_right1 yhxk" v-for="(ite,inde) in item.cg_bq_ids_text" :key="inde" v-if="inde<2">{{ite}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 课程 -->
			<template v-if="ss_type == 2">
				<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id" @click="tzkecxq(item.id)">
					<view class="flexbetween">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 69%;">
							<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
							<view class="flexleft margin_top2">
								<view class="smalltext xiaohui nofonweight margin_right2">{{item.userzbfapply.name}}
								</view>
								<view class="line margin_right2"></view>
								<view class="smalltext xiaohui nofonweight yhxk">{{item.cityinfo}}
								</view>
							</view>
							<view class="flexbetween margin_top2">
								<view class="sanshier xiaohong fonweight">¥ {{item.priceinfo.price}}</view>
								<view class="smalltext xiaohei nofonweight">{{returnKmUnit(Number(item.distance))}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				ss_type: 1, //1场地,2课程
				keywords:"",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				lat:"",
				lng:"",
			}
		},
		onLoad(options) {
			this.ss_type = options.ss_type
			if(this.ss_type==1){
				uni.setNavigationBarTitle({
					title:"场地搜索"
				})
			}else{
				uni.setNavigationBarTitle({
					title:"课程搜索"
				})
			}
			
			this.getlocation()
			
		},
		methods: {
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					}
				});
			},
			returnKmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					lat: this.lat,
					lng: this.lng,
					keywords:this.keywords,
				}
				let url = '/api/cgcl/cgIndex'
				if (this.ss_type == 2) { //课程
					url = '/api/kccl/kcIndex'
					data = {
						page: page || 1,
						limit: _this.limit,
						lat: this.lat,
						lng: this.lng,
						keywords:this.keywords,
						kc_attr: 1,
					}
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
						this.$forceUpdate()
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 跳转课程详情
			tzkecxq(id) {
				uni.navigateTo({
					url: '/pages_homepage/kechenggmxq?id='+id
				})
			},
			// 跳转场定预定详情
			tzcdyd(id) {
				uni.navigateTo({
					url: '/pages_homepage/changdingydqx?id='+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huibtn {
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>